<template>
	<view>
		<u-popup :show="payShow" mode="bottom" bgColor="transparent" @close="close">
			<view class="payPopup py-32 px-28 bg-white round-16">
				<view class="text-36 text-center font-700 relative">
					支付方式
					<u-icon name="close" color="#666666" class="image-2" @click="close"></u-icon>
				</view>
				<view class="mt-32">
					<!-- #ifdef APP || H5 -->
					<view class="box-2 flex align-center" style="background: #F3FFEE; border-color: #3EC800;" :style="{
						borderColor:payWay == 2 ? '#3EC800' : ''
					}" @click="payWay = 2">
						<image src="http://api.fceos.cn/qiliaoyun/profile/appImages/icon_weixin_pay@2x.png"
							class="image-3" mode="">
						</image>
						<view class="fontS-32 text-gray ml-16">
							微信支付
						</view>
					</view>

					<view class="box-2 flex align-center mt-32" :style="{
						borderColor:payWay == 3 ? '#0766FF' : ''
					}" @click="payWay = 3">
						<image src="http://api.fceos.cn/qiliaoyun/profile/appImages/icon_zhifubao@2x.png"
							class="image-3" mode="">
						</image>
						<view class="fontS-32 text-gray ml-16">
							支付宝收款
						</view>
					</view>
					<!-- #endif -->

					<!-- #ifdef MP-WEIXIN -->
					<view class="box-2 flex align-center" style="background: #F3FFEE; border-color: #3EC800;" :style="{
						borderColor:payWay == 0 ? '#3EC800' : ''
					}" @click="payWay = 0">
						<image src="http://api.fceos.cn/qiliaoyun/profile/appImages/icon_weixin_pay@2x.png"
							class="image-3" mode="">
						</image>
						<view class="fontS-32 text-gray ml-16">
							微信支付
						</view>
					</view>
					<!-- #endif -->

					<view class="box-2 flex align-center mt-32" style="background: #FFECE7; border-color: #FFECE7;"
						:style="{
						borderColor:payWay == 4 ? '#FF4F22' : ''
					}" @click="payWay = 4" v-if="yue">
						<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages5/icon_yuezhifu@3x.png"
							class="image-3" mode="">
						</image>
						<view class="fontS-32 text-gray ml-16">
							余额支付
						</view>
					</view>

				</view>

				<view class="box-3 text-center text-FFF" @click="payConfirm">
					确认支付
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "payWay",
		props: {
			payShow: {
				default: false,
			},
			yue: {
				default: false
			}
		},
		data() {
			return {
				// #ifdef APP || H5
				payWay: 3,
				// #endif
				// #ifdef MP-WEIXIN
				payWay: 0,
				// #endif
			};
		},
		methods: {
			payConfirm() {
				this.$emit('payWayConfirm', this.payWay)
			},
			close() {
				this.$emit('payClose')
			}
		}
	}
</script>

<style lang="scss">
	.payPopup {
		width: 710rpx;
		margin: 0 auto;

		.image-2 {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			right: 0;
			top: 0;
		}

		.box-2 {
			width: 654rpx;
			height: 100rpx;
			background: #F8F8F8;
			box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(153, 153, 153, 0.16);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			border: 2rpx solid #EEEEEE;
			padding: 10rpx 16rpx;
		}

		.image-3 {
			width: 80rpx;
			height: 80rpx;
		}

		.image-4 {
			width: 64rpx;
			height: 64rpx;
			margin: 0 10rpx;
		}

		.box-3 {
			width: 654rpx;
			height: 88rpx;
			background: linear-gradient(180deg, #FFB23A 0%, #FF5617 100%);
			border-radius: 252rpx 252rpx 252rpx 252rpx;
			margin-top: 136rpx;
			line-height: 88rpx;
		}
	}
</style>